<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>车速监控</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../layui/css/layui.css">

		<style>
			body {
				background-color: white;
				overflow: hidden;
				overflow-y: scroll;

			}

			body::-webkit-scrollbar {
				display: none;
			}
		</style>
	</head>

	<body><br />
		<div class="layui-container" id="app">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<span>请选择车牌号</span>
					</div>
					<div class="layui-inline" style="width:150px;">
						<select name="taskid" id="taskid" lay-filter="taskid"></select>
					</div>
				</div>
				<div id="main" style="width:800px;height:400px;"></div>
			</form>
		</div>
	</body>
	<script src="../../js/echarts.common.min.js"></script>
	<script src="../../jss/jquery.js"></script>
	<script src="../../jss/vue.js"></script>
	<script src="../../layui/layui.js" charset="utf-8"></script>
	<script src="../../js/application.js"></script>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				speed: [],
				date: []
			}
		})
		layui.use(['element', 'layer', 'carousel', 'table', 'jquery', 'form'], function() {
			var element = layui.element;
			var carousel = layui.carousel;
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;


			$(document).ready(function() {
				createdChart();
				gettask();
				getdata();
			})

			function gettask() {
				$.ajax({
					type: "post",
					url: urlapi + "chart/getcarlist",
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					data:{
						status:'已完成'
					},
					async: false,
					success: function(succ) {
						if (succ.code == 0) {
							//vue.tasklist = succ.data
							var obj = document.getElementById('taskid')
							for (var i = 0; i < succ.data.length; i++) {
								obj.options.add(new Option(succ.data[i].taskid+":"+succ.data[i].carid, succ.data[i].taskid));
							}
							obj.options[0].selected = 1;
							form.render('select')
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}

			form.on('select(taskid)', function(data) {
				getdata();
			})

			function getdata() {
				var taskid = $("#taskid").val();
				$.ajax({
					type: "post",
					url: urlapi + "chart/getspeed",
					data: {
						taskid: taskid
					},
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					async: false,
					success: function(succ) {
						if (succ.code == 0) {
							var datelist = [];
							var speedlist = [];
							for (var i = 0; i < succ.data.length; i++) {
								datelist.push(succ.data[i].routemaptime);
								speedlist.push(succ.data[i].speed);
							}
							vue.date = datelist;
							vue.speed = speedlist;
							createdChart();
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
							var myChart = echarts.init(document.getElementById('main'));
							myChart.setOption({//更新xAxis和series的数据
								xAxis: [{
									data: []
								}],
								yAxis:{},
								series: [{
									name: '温度',
									type: 'line',
									stack: '总量',
									areaStyle: {
										normal: {}
									},
									data: []
								}]
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}

			function createdChart() {
				var myChart = echarts.init(document.getElementById('main'));
				myChart.clear();
				myChart.setOption({
					title: {
						text: '车速折线图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: { /* 分组类型 */
						data: ['车速']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						position: 'bottom',
						type: 'category',
						boundaryGap: false,
						id: [],
						data: vue.date
					}],
					yAxis: {},
					series: [{
						name: '车速',
						type: 'line',
						stack: '总量',
						areaStyle: {
							normal: {}
						},
						data: vue.speed
					}]
				});
			}
		});
		// layui.use(['element','layer', 'carousel', 'table','jquery','form'], function(){
		// 	var element = layui.element;
		// 	var carousel = layui.carousel;
		// 	var table = layui.table;
		// 	var $ = layui.jquery;
		// 	var layer = layui.layer;
		// 	var form = layui.form;
		//获取折线图对象

		//年分下拉框改变事件
		// form.on('select(year)', function(data){
		// 	//初始化折线图
		//     initChart();
		// 	//调用折线图方法
		//     getxAxis(data.value);
		//     //$("#main").load(form.render('select'));
		// })

		//初始化折线图
		// function initChart(){
		// 	var myChart = echarts.init($("#main")[0]);
		// 	myChart.setOption({
		// 	    title: {
		// 	        text: '车速折线图'
		// 	    },
		// 	    tooltip : {
		// 	        trigger: 'axis',
		// 	        axisPointer: {
		// 	            type: 'cross',
		// 	            label: {
		// 	                backgroundColor: '#6a7985'
		// 	            }
		// 	        }
		// 	    },
		// 	    legend: {/* 分组类型 */
		// 	        data:['车速']
		// 	    },
		// 	    toolbox: {
		// 	        feature: {
		// 	            saveAsImage: {}
		// 	        }
		// 	    },
		// 	    grid: {
		// 	        left: '3%',
		// 	        right: '4%',
		// 	        bottom: '3%',
		// 	        containLabel: true
		// 	    },
		// 	    xAxis : [
		// 	        {
		//             	position: 'bottom',
		// 	            type : 'category',
		// 	            boundaryGap : false,
		// 	            id:[],
		// 	            data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
		// 	        }
		// 	    ],
		// 	    yAxis : [
		// 	        {
		// 	            type : 'value'
		// 	        }
		// 	    ],
		// 	    series : [

		// 	        {
		// 	            name:'车速',
		// 	            type:'line',
		// 	            stack: '总量',
		// 	            areaStyle: {normal: {}},
		// 	            data:[0,0,0,0,0,0,0,0,0,0,0,0]
		// 	        }
		// 	    ]
		// 	});
		// }

		//获取折线图数据并改变折线图
		// 	function getxAxis(year){
		// 		$.ajax({
		// 			type : "post",
		// 			url : "statistics/year",
		// 			data : {
		// 				year:year
		// 			},
		// 			dataType : "json",
		// 			success : function(succ) {
		// 				if (succ.code == 1) {
		// 					layer.msg(succ.msg,{icon : 5});
		// 				} else {
		// 					var optionjson = option;
		// 					var out = optionjson.series[0].data;
		// 					var input = optionjson.series[1].data;
		// 					for(var i=1;i<=12;i++){
		// 						for(var j=0;j<succ.data.length;j++){
		// 							if(i == succ.data[j].datetime){
		// 								if(succ.data[j].type == 0){
		// 									out[i-1] = succ.data[j].money;
		// 								}else{
		// 									input[i-1] = succ.data[j].money;
		// 								}
		// 							}
		// 						}
		// 					}
		// 					optionjson.series[0].data = out;
		// 					optionjson.series[1].data = input;
		// 					myChart.setOption(optionjson);
		// 				}
		// 			},
		// 			error : function() {
		// 				layer.msg('请求失败，稍后再试',{icon : 5});
		// 			}
		// 		});
		// 	}
		// 	//页面加载时
		// 	$(document).ready(function(){
		// 		var myDate= new Date(); 
		// 	    var startYear=myDate.getFullYear()-50;//起始年份 
		// 	    var endYear=myDate.getFullYear();//结束年份 
		// 	    var obj=document.getElementById('year') 
		// 	    for (var i=endYear;i>=startYear;i--) 
		// 	    { 
		// 	      obj.options.add(new Option(i,i)); 
		// 	    } 
		// 	    obj.options[obj.options.length-51].selected=1;
		// 	    form.render('select')
		// 	    //初始化折线图
		// 	    initChart();
		// 	    //调用折线图方法
		// 	    getxAxis(endYear);
		// 	})
		// });
	</script>
</html>
